<template>
<li class="list-group-item" v-show="!isShowMenu || (isShowMenu && permit.isMenu) ">
  <b-btn :variant="permit.isMenu ? 'link':'none'" :class="folderIcon()" v-on:click="folderToggle()" />
  <span v-show="!permit.isEditing">{{permit.name}}</span>
  <input type="text" class="form-control" placeholder="名称" v-model="permit.name" v-show="permit.isEditing" style="width:150px">
  <div style="float:right">
    <input type="text" :id="`path${permit.permitId}`" class="form-control" placeholder="路径" v-model="permit.path" :readonly="!permit.isEditing"
      style="width:150px">
    &nbsp;
    <b-popover :target="`path${permit.permitId}`" placement="top" triggers="hover focus">{{permit.path}}</b-popover>
    <input type="text" :id="`permitv${permit.permitId}`" class="form-control" placeholder="权限" v-model="permit.permit" :readonly="!permit.isEditing"
      @blur="changePermit()" style="width:150px">
    &nbsp;
    <b-popover :target="`permitv${permit.permitId}`" placement="top" triggers="hover focus">{{permit.permit}}</b-popover>
    <input type="text" :id="`auth${permit.permitId}`" class="form-control" placeholder="鉴权" v-model="permit.auth" :readonly="!permit.isEditing"
      style="width:150px">
    &nbsp;
    <b-popover :target="`auth${permit.permitId}`" placement="top" triggers="hover focus">{{permit.auth}}</b-popover>
    <div class="custom-control custom-checkbox mr-sm-2">
      <input type="checkbox" class="custom-control-input" value="true" :id="'permitId' + permit.permitId" v-model="permit.isMenu"
        :disabled="!permit.isEditing">
      <label class="custom-control-label" :for="'permitId' + permit.permitId">菜单</label>
    </div>
    &nbsp;
    <input type="text" :id="`icon${permit.permitId}`" class="form-control" placeholder="图标" v-model="permit.icon" :readonly="!permit.isEditing"
      style="width:100px">
    &nbsp;
    <b-popover :target="`icon${permit.permitId}`" placement="top" triggers="hover focus">{{permit.icon}}</b-popover>
    <input type="text" :id="`tag${permit.permitId}`" class="form-control" placeholder="标签" v-model="permit.tag" :readonly="!permit.isEditing"
      style="width:70px">
    <b-popover :target="`tag${permit.permitId}`" placement="top" triggers="hover focus">{{permit.tag}}</b-popover>
    <b-btn variant="link" v-on:click="add()" title="添加"> <span class="far fa-plus-square"></span></b-btn>
    <b-btn variant="link" v-on:click="edit()" title="编辑" v-show="!permit.isEditing"> <span class="far fa-edit"></span></b-btn>
    <b-btn variant="link" v-on:click="save()" title="保存" v-show="permit.isEditing"> <span class="far fa-save"></span></b-btn>
    <b-btn variant="link" v-on:click="up(index)" title="上移"> <span class="far fa-arrow-alt-circle-up"></span></b-btn>
    <b-btn variant="link" v-on:click="down(index)" title="下移"> <span class="far fa-arrow-alt-circle-down"></span></b-btn>
    <b-btn variant="link" v-on:click="del(index)" title="删除"> <span class="far fa-trash-alt"></span></b-btn>
  </div>
  <ul class="list-group" v-if="permit.isFolderOpen && permit.permits && permit.permits.length > 0">
    <PermitListItem v-for="(subPerm, subIndex) in permit.permits" :permits="permit.permits" :index="subIndex" :permit="subPerm"
      :key="subPerm.permitId" :isShowMenu="isShowMenu" :platType="platType" />
  </ul>
</li>
</template>
<script>
  import $ from 'jquery'
  import cfg from '../dist/js/config'
  import PermitListItem from './PermitListItem'

  function folderToggle() {
    this.permit.isFolderOpen = !this.permit.isFolderOpen
    if (this.permit.isFolderOpen) {
      this.loadChildren()
    }
  }
  function folderOpen() {
    if (this.permit.isFolderOpen) {
      return
    }
    this.permit.isFolderOpen = true
    this.loadChildren()
  }
  function folderIcon() {
    if (this.permit.isMenu) {
      return this.permit.isFolderOpen ? 'far fa-folder-open' : 'far fa-folder'
    } else {
      return 'far fa-file'
    }
  }
  function loadChildren() {
    if (this.permit.isLoaded) {
      return
    }
    this.permit.isLoaded = true
    $.get(cfg.serverPath + '/permit/list/' + this.permit.platform + '/!/' + this.platType + '-list-permit',
      {
        level: this.permit.level + 1,
        parentId: this.permit.permitId,
        'sorts[0].field': 'sort',
        'sorts[0].isDesc': false
      },
      result => {
        if (result.status != 0) {
          $(document).failMsg(result.message)
          return
        }
        if (!result.data) {
          return
        }
        for (let permit of result.data) {
          permit.isEditing = false
          permit.isLoaded = false
          permit.isFolderOpen = false
          permit.permits = []
          this.permit.permits.push(permit) }
      })
  }
  function add() {
    this.folderOpen()
    const item = {
      parentId: this.permit.permitId,
      level: this.permit.level + 1,
      sort: this.permit.permits.length > 0 ? this.permit.permits[this.permit.permits.length - 1].sort + 1 : 0,
      platform: this.permit.platform,
      name: '新的权限名称',
      permit: '',
      auth: '',
      tag: '',
      path: '',
      isMenu: true,
      icon: 'mdi mdi-chart-bubble',
      permits: [],
      isLoaded: false,
      isFolderOpen: false,
      isEditing: true
    }
    $.ajax({
      contentType: 'application/json; charset=UTF-8',
      url: cfg.serverPath + '/permit/add/' + this.permit.platform + '/!/' + this.platType + '-add-permit',
      type: 'put',
      data: JSON.stringify(item),
      success: result => {
        if (result.status != 0) {
          $(document).failMsg(result.messge)
          return
        }
        item.permitId = result.data
        this.permit.permits.push(item)
      }
    })
  }
  function edit() {
    this.permit.isEditing = true
  }
  function save() {
    if (!this.permit.name.trim()) {
      $(document).failMsg('名称不能为空')
      return
    }
    this.update(this.permit)
  }
  function up(i) {
    if (i <= 0) {
      return
    }
    if (this.permits[i].sort <= this.permits[i - 1].sort) { // 加载同级列表和添加并行时会有此情况
      this.permits[i].sort = this.permits[i - 1].sort + 1
    }
    let sort = this.permits[i].sort
    this.permits[i].sort = this.permits[i - 1].sort
    this.permits[i - 1].sort = sort
    this.permits.splice(i - 1, 2, this.permits[i], this.permits[i - 1])
    this.update(this.permits[i])
    this.update(this.permits[i - 1])
  }
  function down(i) {
    if (i >= this.permits.length - 1) {
      return
    }
    if (this.permits[i].sort == this.permits[i + 1].sort) { // 加载同级列表和添加并行时会有此情况
      this.permits[i + 1].sort += 1
    }
    let sort = this.permits[i].sort
    this.permits[i].sort = this.permits[i + 1].sort
    this.permits[i + 1].sort = sort
    this.permits.splice(i, 2, this.permits[i + 1], this.permits[i])
    this.update(this.permits[i + 1])
    this.update(this.permits[i])
  }
  function del(i) {
    if (this.permits[i].permits.length > 0) {
      $(document).failMsg('请先删除子项')
      return
    }
    $.ajax({
      contentType: 'application/json; charset=UTF-8',
      url: cfg.serverPath + '/permit/del/' + this.permits[i].platform + '/!/' + this.platType + '-del-permit',
      type: 'delete',
      data: '' + this.permits[i].permitId,
      success: result => {
        if (result.status != 0) {
          $(document).failMsg(result.messge)
          return
        }
        this.permits.splice(i, 1)
      }
    })
  }
  function update(item) {
    $.ajax({
      contentType: 'application/json; charset=UTF-8',
      url: cfg.serverPath + '/permit/edit/' + item.platform + '/!/' + this.platType + '-edit-permit',
      type: 'patch',
      data: JSON.stringify(item),
      success: result => {
        if (result.status != 0) {
          $(document).failMsg(result.messge)
          return
        }
        item.isEditing = false
      }
    })
  }
  function changePermit() {
    if (this.permit.permit && !this.permit.auth) {
      this.permit.auth = `myAuthc,myPerms[${this.permit.permit}]`
    }
  }
  export default {
    name: 'PermitListItem',
    components: {
      PermitListItem
    },
    props: {
      platType: String,
      isShowMenu: Boolean,
      permits: Array,
      index: Number,
      permit: Object
    },
    methods: {
      folderIcon,
      folderToggle,
      folderOpen,
      loadChildren,
      add,
      edit,
      save,
      up,
      down,
      update,
      del,
      changePermit
    },
    created() {
      /* 
      if (!this.permit.isMenu) {
        this.permit.isFolderOpen = true
        this.loadChildren()
      }
       */
    }
  }
</script>
<style scoped>
.list-group .custom-checkbox {
	display: inline;
}

.list-group .custom-checkbox .custom-control-label::before {
	top: 0.09rem;
}

.list-group .custom-checkbox .custom-control-label::after {
	top: 0.09rem;
}

.list-group .custom-checkbox .custom-control-label {
	font-weight: 100;
	position: initial;
}

.list-group input[type=text] {
	display: inline-block;
	width: 200px;
}

.list-group button {
	padding: 0px;
	padding-left: 5px;
}

.list-group .list-group {
	clear: both;
}

.list-group .list-group-item {
	border-right: 0px;
	border-left: 0px;
	border-bottom: 0px;
	padding: 5px 20px 0px 20px;
}

.list-group .list-group-item:focus, .list-group .list-group-item:hover {
	z-index: 0;
	text-decoration: none;
}

.list-group .list-group .list-group-item {
	padding-right: 0px;
	padding-left: 0px;
	padding: 5px 0px 0px 20px;
}
</style>